<template>
  <div class="topfilter">
    <!-- 酒店标签筛选功能页面 -->
    <div>
      <h4>位置区域</h4>
    </div>

    <div>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane :label="v.label" :name="v.name" v-for="v in topfilterlist" :key="v.id">

          <el-button size="small" type="info" plain v-for="(k, i) in v.list" :key="i"
            @click="throttle_01(add_selectdata_01, k)" :class="iscative_01 == k ? 'addclass' : ''">
            {{ k }}
          </el-button>

        </el-tab-pane>
      </el-tabs>
    </div>

    <div>
      <h4>星级等级</h4>
    </div>

    <div>

      <div class="topfilter-price">

        <el-button size="small" type="info" plain v-for="(v, i) in pricelist" :key="i"
          @click="throttle_02(add_selectdata_02, v)" :class="iscative_02 == v ? 'addclass' : ''">
          {{ v }}
        </el-button>

      </div>

    </div>

    <div>
      <h4>高级筛选</h4>
    </div>

    <div>
      <div class="topfilter-filter">
        <el-dropdown v-for="(v, i) in filterlist" :key="i">

          <span class="el-dropdown-link">
            {{ v.title }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>

          <template #dropdown>
            <el-dropdown-menu>

              <el-dropdown-item v-for="(k, i) in v.list" :key="i" @click="throttle_03(add_selectdata_03, k, v.title)"
                :class="iscative_03 == k ? 'addclass' : ''">
                {{ k }}
              </el-dropdown-item>

            </el-dropdown-menu>
          </template>

        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, toRef } from 'vue'
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
const activeName = ref('first')
//区域位置筛选条件
let topfilterlist = ref([
  { id: 1, name: 'first', label: '热门筛选', list: ['天安门', '王府井', '北京大院', '八达岭长城', '颐和园', '人民英雄纪念碑'] },
  { id: 2, name: 'second', label: '机场车站', list: ['北京南站', '北京西站', '北京火车站', '首都机场', '北京南苑机场', '北京东站'] },
  { id: 3, name: 'third', label: '商业区', list: ['三里屯', '国贸地区', '西直门', '大望路', '双井', '后海', '果园', '酒仙桥', '东直门'] },
  { id: 4, name: 'fourth', label: '景点', list: ['什刹海', '前门大街', '五道口', '白桦林景区', '华清温泉', '北海公园', '北京海洋馆', '大观园', '天坛公园'] }
])
//星级价格筛选
let pricelist = ref(['豪华/五星(钻级)', '高档/四星(钻级)', '舒适/三星(钻级)', '经济/二星(钻级)'])
//高级筛选
let filterlist = ref([
  { title: '早餐', list: ['单份早餐', '多份早餐'] },
  { title: '支付方式', list: ['在线付款', '到店付款', '闪住'] },
  { title: '酒店设施', list: ['免费停车', '网球场', '商务中心', '会议厅', '健身室', 'SPA', "行李寄存"] },
  { title: '住宿类型', list: ['民宿', '酒店', '青年旅社', '别墅'] },
  { title: '品牌', list: ['汉庭', '如家', '亚朵', '桔子酒店'] },
])

//pinia本地化存储用户信息
import { Hotaldata } from "../store/Hotaldata.js";
import { storeToRefs } from "pinia";
const hotaldata = Hotaldata();
let { a_recommendlist } = storeToRefs(hotaldata)

//获取点击标签内容，进行查询
//按照酒店方位搜索符合酒店
let iscative_01 = ref(null);
let add_selectdata_01 = (k: any) => {
  //清空星级标签的活动样式
  iscative_02.value=null
  //给选中按钮增加样式
  iscative_01.value = k;
  //判断是否输入目的地和入住时间
  if (hotaldata.Select_storeData.city != null && hotaldata.Select_storeData.hotelTime != null) {
    let transport = k
    hotaldata.Select_storeData.transport = transport
    //清空搜索条件
    hotaldata.Select_storeData.tag = null
    hotaldata.Select_storeData.hotalType = null
    hotaldata.Select_storeData.homePrice = null
    hotaldata.Select_storeData.brand = null
    hotaldata.Select_storeData.score = null
    hotaldata.Select_storeData.star = null

    const data = { ...hotaldata.Select_storeData }
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length >= 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
    ElMessage({
      showClose: true,
      message: '请稍等，正在查询...',
      type: 'success',
    })
    //搜索请求
    Link(apiurl.hotalList, "POST", data).then((ok: any) => {
      console.log(ok);
      // 搜索的酒店信息放到pinia本地存储
      a_recommendlist.value = ok
      hotaldata.select_state = true
      if (ok.length == 0) {
        const message = document.querySelector('.el-message__content')?.parentNode
        //判断提示框的数量   
        if (document.getElementsByClassName('el-message__content').length >= 1) {
          setTimeout(function () {
            message.parentNode.removeChild(message);
          }, 100)
        }
        ElMessage({
          showClose: true,
          message: '抱歉，暂无符合条件的酒店...',
          type: 'error',
        })
      }
    })
  } else {
    ElMessage({
      showClose: true,
      message: '请输入目的地和入住时间...',
      type: 'error',
    })
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length > 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
  }
}
// 定义一个标志
let canRun_01 = ref(false);
//节流函数，接受参数为目标函数和延迟时长
const throttle_01 = (fn: any, k: any) => {
  if (!canRun_01.value) {
    fn(k);
    canRun_01.value = true
    setTimeout(function () {
      canRun_01.value = false;
    }, 1000)
  } else {
    return
  }
};


//按照酒店星级搜索符合酒店
let iscative_02 = ref(null);
let add_selectdata_02 = (k: any) => {
  //给选中按钮增加样式
  iscative_02.value = k;
  console.log(iscative_02.value);

  if (hotaldata.Select_storeData.city != null && hotaldata.Select_storeData.hotelTime != null) {
    let star = null
    if (k == pricelist.value[0]) {
      star = 5
    } else if (k == pricelist.value[1]) {
      star = 4
    } else if (k == pricelist.value[2]) {
      star = 3
    } else if (k == pricelist.value[3]) {
      star = 2
    } else {
      console.log(k);
    }
    hotaldata.Select_storeData.star = star
    console.log(hotaldata.Select_storeData);
    //清空搜索条件
    hotaldata.Select_storeData.tag = null
    hotaldata.Select_storeData.hotalType = null
    hotaldata.Select_storeData.homePrice = null
    hotaldata.Select_storeData.brand = null
    hotaldata.Select_storeData.score = null
    const data = { ...hotaldata.Select_storeData }
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length >= 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
    ElMessage({
      showClose: true,
      message: '请稍等，正在查询...',
      type: 'success',
    })
    //搜索请求
    Link(apiurl.hotalList, "POST", data).then((ok: any) => {
      console.log(ok);
      // 搜索的酒店信息放到pinia本地存储
      a_recommendlist.value = ok
      hotaldata.select_state = true
      if (ok.length == 0) {
        const message = document.querySelector('.el-message__content')?.parentNode
        //判断提示框的数量   
        if (document.getElementsByClassName('el-message__content').length >= 1) {
          setTimeout(function () {
            message.parentNode.removeChild(message);
          }, 100)
        }
        ElMessage({
          showClose: true,
          message: '抱歉，暂无符合条件的酒店...',
          type: 'error',
        })
      }
    })

  } else {
    ElMessage({
      showClose: true,
      message: '请输入目的地和入住时间...',
      type: 'error',
    })
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length > 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
  }
}
// 定义一个标志
let canRun_02 = ref(false);
//节流函数，接受参数为目标函数和延迟时长
const throttle_02 = (fn: any, k: any) => {
  if (!canRun_02.value) {
    fn(k);
    canRun_02.value = true
    setTimeout(function () {
      canRun_02.value = false;
    }, 1000)
  } else {
    return
  }
};


//高级筛选符合酒店
let iscative_03 = ref(null);
let add_selectdata_03 = (k: any, title: any) => {
  //给选中按钮增加样式
  iscative_03.value = k;

  if (hotaldata.Select_storeData.city != null && hotaldata.Select_storeData.hotelTime != null) {
    let end =
    {
      tag: null,
      hotalType: null,
      homePrice: null,
      brand: null,
      score: null
    }
    if (title == "早餐" || title == "支付方式" || title == "酒店设施") {
      end.tag = k
    }
    if (title == "住宿类型") {
      end.hotalType = k
    }
    if (title == "价格") {
      end.homePrice = k
    }
    if (title == "品牌") {
      end.brand = k
    }
    if (title == "评分") {
      end.score = k
    }
    hotaldata.Select_storeData.tag = end.tag
    hotaldata.Select_storeData.hotalType = end.hotalType
    hotaldata.Select_storeData.homePrice = end.homePrice
    hotaldata.Select_storeData.brand = end.brand
    hotaldata.Select_storeData.score = end.score
    console.log(hotaldata.Select_storeData);

    const data = { ...hotaldata.Select_storeData }
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length >= 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
    ElMessage({
      showClose: true,
      message: '请稍等，正在查询...',
      type: 'success',
    })
    //搜索请求
    Link(apiurl.hotalList, "POST", data).then((ok: any) => {
      console.log(ok);
      // 搜索的酒店信息放到pinia本地存储
      a_recommendlist.value = ok
      hotaldata.select_state = true
      if (ok.length == 0) {
        const message = document.querySelector('.el-message__content')?.parentNode
        //判断提示框的数量   
        if (document.getElementsByClassName('el-message__content').length >= 1) {
          setTimeout(function () {
            message.parentNode.removeChild(message);
          }, 100)
        }
        ElMessage({
          showClose: true,
          message: '抱歉，暂无符合条件的酒店...',
          type: 'error',
        })
      }
    })
  } else {
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length > 1) {
      setTimeout(function () {
        message.parentNode.removeChild(message);
      }, 100)
    }
    ElMessage({
      showClose: true,
      message: '请输入目的地和入住时间...',
      type: 'error',
    })

  }
}
// 定义一个标志
let canRun_03 = ref(false);
//节流函数，接受参数为目标函数和延迟时长
const throttle_03 = (fn: any, k: any, title: any) => {
  if (!canRun_03.value) {
    fn(k, title);
    canRun_03.value = true
    setTimeout(function () {
      canRun_03.value = false;
    }, 1000)
  } else {
    return
  }
};
</script>

<style scoped>
.addclass {
  background-color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  color: aliceblue;
}

.topfilter {
  width: 750px;
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: repeat(3, auto);
}

.topfilter>div {
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
}

h4 {
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}

/* 鼠标悬停时的颜色 */
.el-button:hover {
  background-color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
}

/* 鼠标松开时的颜色 */
.el-button:focus {
  background-color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  color: aliceblue;
}

.el-button {
  margin: 5px;
}

.el-check-tag {
  font-size: 11px;
  font-weight: normal;
  margin: 5px;
  border: 1px solid #dadada;
}

.topfilter-filter .el-dropdown {
  margin: 10px 15px;
}
</style>
